<template>
	<!-- 精选-> 分类-新书-完结卡片 -->
	<view class="nav-card">
		<!-- 导航栏 -->
		<view class="nav">
			<view>{{title}}</view>
			<image src="/static/index/tui.png" mode="" @click="toBack"></image>
		</view>
		<!-- 卡片 -->
		<view class="card" v-for="(item,index) in shulist" @click="toXiangqing">
			<view class="img">
				<image :src="item.imgSrc" mode=""></image>
			</view>
			<view class="nav-item">
				<view class="nav-head">{{item.title}}</view>
				<view class="nav-body">
					<text>{{item.geng}}</text>
					<text>{{item.author}}</text>
				</view>
				<view class="nav-end">
					{{item.desc}}
				</view>
			</view>
		</view>
		<u-gap height="6" bg-color="#F6F6F6"></u-gap>
		<u-divider margin-top="36">持续更新中~</u-divider>
	</view>
</template>

<script>
	export default {
		name:'jingxuan-fxwcard',
		props:{
			title:{
				type:String,
				default(){
					return ''
				}
			},
			shulist:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			toXiangqing(){
				uni.navigateTo({
				    url: '/pages/xiangqing/xiangqing'
				});
			},
			toBack(){ //返回
				uni.navigateBack(1)
			}
		}
	}
</script>

<style scoped lang="scss">
.nav-card{
	.nav{
		display: flex;
		justify-content: space-between;
		padding: 42rpx 37rpx;
		image{
			width: 56rpx;
			height: 56rpx;
		}
		view{
			font-size: 46rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #010101;
		}
	}
	.card{
		background: #FFFFFF;
		// margin: 0 18rpx;
		display: flex;
		padding: 25rpx 34rpx;
		box-sizing: border-box;
		.img{
			image{
				width: 210rpx;
				height: 290rpx;
			}
			
		}
		.nav-item{
			margin-left: 28rpx;
			font-family: Microsoft YaHei;
			.nav-head{
				font-size: 35rpx;
				font-weight: bolder;
				color: #000000;
				line-height: 50rpx;
			}
			.nav-body{
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				font-weight: 400;
				color: #A7A7A7;
				line-height: 65rpx;
			}
			.nav-end{
				height: 200rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #939393;
				line-height: 49rpx;
				overflow: hidden;
				word-break: break-all;  /* break-all(允许在单词内换行。) */
				text-overflow: ellipsis;  /* 超出部分省略号 */
				display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 4; /** 显示的行数 **/
			}
		}
	}
}
</style>

